<template>
    <div class="detector_page_class">
        <div class="shadow_bg_class"
             style="width: 100%;color: #ffffff;padding: 12px ">

            <el-form ref="filters" :model="filters" label-width="100px">
                <el-row :gutter="20" style="margin-bottom: 0px">
                    <el-col :span="8">
                        <el-form-item label="设备名称：" style="margin-bottom: 0 !important;">
                            <el-input
                                    v-model="filters.description"
                                    placeholder="设备名称" clearable>
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="设备类型：" style="margin-bottom: 0 !important;">
                            <el-select v-model="filters.detectorType" placeholder="请选择" clearable>
                                <el-option
                                        v-for="item in detectorTypeOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8" style="display: flex;justify-content: space-between">
                        <el-button type="primary"
                                   style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                                   @click="handleSearch">搜索
                        </el-button>
                        <el-button type="primary"
                                   style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                                   @click="tableOperate('add')">新建设备
                        </el-button>

                    </el-col>
                </el-row>

            </el-form>

        </div>
        <el-table :data="detectorList" class="wxtable" style="margin-top: 12px">
            <el-table-column
                    type="index"
                    label="序号" width="80" align='center'>
            </el-table-column>
            <el-table-column prop="description" label="设备名称" width="200" align='center'>
            </el-table-column>
            <el-table-column prop="detectorType" label="设备类型" width="200" align='center'>
            </el-table-column>
            <el-table-column prop="location" label="设备位置" align='center'>
            </el-table-column>
            <el-table-column prop="tableName" label="采集数据表名" width="120" align='center'>
            </el-table-column>
            <el-table-column label="操作" align='center'>
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" plain
                               @click="tableOperate('edit', scope.row)">编辑
                    </el-button>
                    <el-button size="mini" type="info" plain
                               @click="tableOperate('del', scope.row)" v-show="!scope.row.admin">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-floor">
            <div>

                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="detectorPage.page+1"
                        :page-sizes="[10, 30, 50, 100]"
                        :page-size="detectorPage.rows"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="detectorPage.count">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="新建设备" :visible.sync="addFormVisible"  width="500px"
                   :close-on-click-modal="false"
                   center>
            <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">

                <el-form-item label="设备名称：" prop="description">
                    <el-input v-model="addForm.description"></el-input>
                </el-form-item>
                <el-form-item label="设备类型：" prop="detectorType">
                    <el-select v-model="addForm.detectorType" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in detectorTypeOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备位置：" prop="location">
                    <el-input v-model="addForm.location"></el-input>
                </el-form-item>
                <el-form-item label="采集数据表名：" prop="tableName">
                    <el-input v-model="addForm.tableName"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer">
                <el-button @click.native="addFormVisible=false">取消
                </el-button>
                <el-button type="primary" @click.native="addFormSubmit"
                           style="margin-left: 48px">提交
                </el-button>

            </div>
        </el-dialog>

        <el-dialog title="修改设备" :visible.sync="editFormVisible" width="500px"
                   :close-on-click-modal="false"
                   center>
            <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">

                <el-form-item label="设备名称：" prop="description">
                    <el-input v-model="editForm.description"></el-input>
                </el-form-item>
                <el-form-item label="设备类型：" prop="detectorType">
                    <el-select v-model="editForm.detectorType" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in detectorTypeOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备位置：" prop="location">
                    <el-input v-model="editForm.location"></el-input>
                </el-form-item>
                <el-form-item label="采集数据表名：" prop="tableName">
                    <el-input v-model="editForm.tableName"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <el-button @click.native="editFormVisible=false">取消
                </el-button>
                <el-button type="primary" @click.native="editFormSubmit"
                           style="margin-left: 48px">提交
                </el-button>

            </div>
        </el-dialog>
    </div>

</template>

<script>
    import detector_list_page_bus from './detector_list_page_bus.js'

    export default detector_list_page_bus

</script>
<style scoped>

</style>
